<template>
    <div id="contentMargin">
        <div class="slider">
            <slide :imgs="imgs"></slide>
        </div>
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价：￥
                    <s>{{info.market_price}}</s> 销售价：￥
                    <span>{{info.sell_price}}</span>
                </li>
                <li>
                    购买数量：
                    <inputN @dataobj="getdata"></inputN>
                    <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                    <div v-show="isshow" id="ball"></div>
                    </transition>

                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
                </li>
            </ul>
        </div>
        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button type="primary" size="large">图文列表</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品详情</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
import slide from '../subcom/slide.vue';
import common from '../../kits/common.js';
import inputN from '../subcom/inputN.vue';
import { vm, COUNT } from '../../kits/vm.js';
import { setItem, valueObj } from '../../kits/localS.js'
export default {
    components: {
        slide,
        inputN
    },
    data() {

        return {
            isshow: false,
            count: 1,
            id: 0,
            imgs: [
                {
                    "img_url": "../../../statics/imgs/img1.jpg"
                },
                {
                    "img_url": "../../../statics/imgs/img2.jpg"
                },
                {
                    "img_url": "../../../statics/imgs/img3.jpg"
                }

            ],
            info: {
                "id": 87,
                "title": "商品1（这是描述）",
                "add_time": "2015-4-14",
                "goods_no": "SD910232323",
                "stock_quantity": "88",
                "market_price": 2222,
                "sell_price": 2122,

            }
        }
    },
    created() {
        this.id = this.$route.params.id;
        // this.getimgs();
        // this.getinfo();
    },
    methods: {
        beforeEnter(el){
            //小球的初始位置
            el.style.transform= 'translate(0px,0px)';
        },
        enter(el,done){
            // 保证出现动画，
            el.offsetWidth;
            //结束位置
            el.style.transform='translate(80px,386px)';
            done();
        },
        afterEnter(el){
            this.isshow = !this.isshow;
        },
        toshopcar() {
            // console.log(vm);
            // console.log(COUNT);
            vm.$emit(COUNT, this.count);
            valueObj.goodsid = this.id;
            valueObj.count = this.count;
            setItem(valueObj);
            this.isshow = !this.isshow;

        },
        getdata(input) {
            this.count = input;
            // console.log(this.count);
        },
        getinfo() {
            var url = common.apidomain + '/api/....' + this.id;
            this.$http.get(url).then(res => {
                if (res.body.status != 0) {
                    alert(res.body.message);
                    return;
                }
                this.imgs = res.body.message[0];
            })
        },
        getimgs() {
            var url = common.apidomain + '/api/....' + this.id;
            this.$http.get(url).then(res => {
                if (res.body.status != 0) {
                    alert(res.body.message);
                    return;
                }
                this.imgs = res.body.message;
            })
        }
    }
}
</script>
<style scoped>
.slider {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
}

#buy {
    padding: 5px;
    margin: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px
}

#buy h4 {
    color: #0094ff;
    padding: 5px;
}

.line {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    margin: 3px
}

#buy ul {
    padding-left: 0;
}

#buy li {
    list-style: none;
    padding: 8px;
    position: relative;
}

#buy .price span {
    color: red;
}

#params {
    padding: 5px;
    margin: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px
}

#params li {
    list-style: none;
    padding: 8px;
}

#other {
    padding: 5px;
    margin: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px
}

#other :nth-child(1) {
    margin-bottom: 10px;
}

#ball {
    background-color: red;
    width: 15px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    left: 150px;
    top: 10px;
    transition: all 0.4s ease;
    z-index: 100;
}
</style>

